<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>广播式WebSocket</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>


<link rel="stylesheet" href="http://coolaf.com/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://coolaf.com/static/css/offcanvas.css">
<style type="text/css">
	.newmessage {
		width: 100%;
	}
	
	.bubble {
		background-color: lightgreen position: relative;
		max-width: 240px;
		word-wrap: break-word;
		text-align: left;
		margin-left: 16px;
		margin-right: 16px;
		border-radius: 9px;
	}
	
	.bubble:after {
		position: absolute;
		border: 4.8px solid transparent;
		content: " ";
		top: 20px;
	}
	
	.disabled {
		pointer-events:none; 
	}
</style>
</head>
<body onload="">
	<div class="container" style="width:100%">
		<div class="row row-offcanvas row-offcanvas-right main-contain">
			<div class="col-xs-12 col-sm-8">
				<div style="">
					<div>
						<input type='text' value='ws://localhost:8080/websocket/duleilewuhen' class="form-control" style='width:390px;display:inline'id='wsaddr'/> 
						<div class="btn-group" role="group" aria-label="...">
							<button type="button" class="btn btn-default" onclick='addsocket();'>连接</button>
							<button type="button" class="btn btn-default" onclick='closesocket();'>断开</button>
							<button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")'>清空</button>
							<button type="button" class="btn btn-default" onclick='$("#wsaddr").val("ws://123.207.167.163:9010/ajaxchattest")'>示例</button>
						</div>
						<div style='margin-top:10px;margin-button:10px'>
							<pre>本工具主要是为了测试服务端websocket功能是否完善可用而开发，主要是利用html5 的websocket去连接服务端的websocket,因此，
							无论你是内网还是外网都可使用!服务端只是实现了接受和发送，这里只是测试而已！</pre>
						</div>
					</div>
					<div class="row" >
					<div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin-left:15px"></div>
						<div class="col-lg-6">
							<div class="input-group" style=''>
								<input type="text"id='message'  class="form-control" style='width:810px' placeholder="待发信息" onkeydown="en(event);">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button" onclick="doSend();">发送</button>
									<button class="btn btn-default" type="button" onclick="clean();">清空</button>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<style>
				.leftul{
					
				}
				.leftulli{
					list-style:none; 
					margin-top:10px;
					border-bottom:1px solid #ccc;
				}
				.siteleadul li{
					list-style:none;
					width:200px;
					float:left;
					line-height:25px
				}
			</style>
			<div class="col-xs-6 col-sm-4 sidebar-offcanvas" id="sidebar">
				<ul class='leftul'>
					<li class='leftulli'>
						<span style='font-weight:bold'>在线用户</span>
						<ul class='siteleadul'>
							<li>1</li>
							<li>1</li>
							<li>1</li>
							<li>1</li>
							<li>1</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>

<script language="javascript" type="text/javascript">
	function formatDate(now) {
		var year = now.getFullYear();
		var month = now.getMonth() + 1;
		var date = now.getDate();
		var hour = now.getHours();
		var minute = now.getMinutes();
		var second = now.getSeconds();
		return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-"
				+ (date = date < 10 ? ("0" + date) : date) + " "
				+ (hour = hour < 10 ? ("0" + hour) : hour) + ":"
				+ (minute = minute < 10 ? ("0" + minute) : minute) + ":"
				+ (second = second < 10 ? ("0" + second) : second);
	}
	
	if(window.WebSocket){
		
	} else {
		console.log("您的浏览器不支持WebSocket"); 
	}
	
	var output;
	var websocket;
	function init() {
		output = document.getElementById("output");
		// testWebSocket();
	}

	function addsocket() {
		var wsaddr = $("#wsaddr").val();
		if (wsaddr == '') {
			alert("请填写websocket的地址");
			return false;
		}
		StartWebSocket(wsaddr);
	}

	function closesocket() {
		websocket.close();
	}

	function StartWebSocket(wsUri) {
		websocket = new WebSocket(wsUri);
		websocket.onopen = function(evt) { // 打开事件  
			onOpen(evt)
		};
		websocket.onclose = function(evt) {  // 关闭事件  
			onClose(evt)
		};
		websocket.onmessage = function(evt) { // 获得消息事件  
			// 发现消息进入， 开始处理前端触发逻辑
			onMessage(evt)
		};
		websocket.onerror = function(evt) { // 发生了错误事件  
			onError(evt)
		};
	}

	function onOpen(evt) {
		writeToScreen("<span style='color:red'>连接成功，现在你可以发送信息啦！！！</span>");
	}
	
	function onClose(evt) {
		writeToScreen("<span style='color:red'>websocket连接已断开!!!</span>");
		websocket.close();
	}
	
	function onMessage(evt) {
		writeToScreen('<span style="color:blue">服务端回应&nbsp;'
				+ formatDate(new Date()) + '</span><br/><span class="bubble">'
				+ evt.data + '</span>');
	}
	
	function onError(evt) {
		writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data);
	}
	
	function doSend() {
		var message = $("#message").val();
		if (message == '') {
			alert("请先填写发送信息");
			$("#message").focus();
			return false;
		}
		if (typeof websocket === "undefined") {
			alert("websocket还没有连接，或者连接失败，请检测");
			return false;
		}
		if (websocket.readyState == 3) {
			alert("websocket已经关闭，请重新连接");
			return false;
		}
		console.log(websocket);
		$("#message").val('');
		writeToScreen('<span style="color:green">你发送的信息&nbsp;'
				+ formatDate(new Date()) + '</span><br/>' + message);
		websocket.send(message);
	}

	function writeToScreen(message) {
		var div = "<div class='newmessage'>" + message + "</div>";
		var d = $("#output");
		var d = d[0];
		var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
		$("#output").append(div);
		if (doScroll) {
			d.scrollTop = d.scrollHeight - d.clientHeight;
		}
	}

	function en(event) {
		var evt = evt ? evt : (window.event ? window.event : null);
		if (evt.keyCode == 13) {
			doSend()
		}
	}
	
	function clean(){
		$("#output").empty();
	}
</script>
</html>